<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box {
            margin: 0 auto;
            text-align: center;
        }

        table {
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>

<div id="box">
    <h2>昆虫信息管理系统</h2>

    <form method="get" th:action="@{/insect/list}">

        <input class="name" name="name" placeholder="请输入昆虫名" type="text">

        <select name="cid">
            <option selected value="0">——请选择分类——</option>
            <span th:each="insectCategory : ${allType}">
                <option th:text="${insectCategory.cname}" th:value="${insectCategory.id}"></option>
            </span>
        </select>

        <input type="submit" value="查询"/>
        <input th:onclick="'location.href=\'/insect/toAdd\''" type="button"
               value="添加昆虫信息">
    </form>

    <table border="1">
        <tr>
            <td>编号</td>
            <td>分类</td>
            <td>昆虫名</td>
            <td>寿命</td>
            <td>地域分布</td>
            <td>首次发现时间</td>
            <td>操作</td>
        </tr>

        <tr th:each=" insect: ${all}">
            <td>[[${insect.id}]]</td>
            <td>
                <span th:if="${insect.cid==1}">有翅膀</span>
                <span th:if="${insect.cid==2}">有绒毛</span>
                <span th:if="${insect.cid==3}">有复眼</span>
                <span th:if="${insect.cid==4}">没翅膀</span>
            </td>
            <td>[[${insect.name}]]</td>
            <td>[[${insect.life}]]</td>
            <td>[[${insect.area}]]</td>
            <td th:text="${#dates.format(insect.discoveryTime,'yyyy-MM-dd')}"></td>
            <td>
                <a href="javascript:void(0)" th:onclick="'del('+${insect.id}+')'" type="button">删除</a>
                <a href="javascript:void(0)" th:onclick="'location.href=\'/insect/byId?id='+${insect.id}+'\''">修改</a>
            </td>
        </tr>

    </table>
</div>

<script src="/js/jquery.js"></script>
<script th:inline="javascript">
    $(function () {
        $("tr:odd").css("background-color", "#fff")
        $("tr:even").css("background-color", "aquamarine")
        $("tr:eq(0)").css("background-color", "aqua")
    })

    function del(id) {
        if (confirm("确定要删除吗？")) {
            $.post('insect/delete', {id: id}, function (data) {
                console.log(data)
                if (data) {
                    alert("删除成功！");
                    location.href = 'insect/list';
                } else {
                    alert("删除失败！");
                    location.reload();
                }
            })
        }
    }


    function select() {
        var names = $(".name").val();
        var id = $("#cid").val();
        location.href = 'list?name=' + names + "&cid=" + id;
        // $.get('mainList',{cnames:cnames,id:id},function (resultData){
        //     if (resultData !=null){
        //         alert("有数据")
        //     }else{
        //         alert("无数据")
        //     }
        // })
    }
</script>

</body>
</html>